<template>
	<view class="lagBox">
		<view class="avatar">
			<image :src="member.avatar" mode="aspectFill" @click="avatarChange"></image>
		</view>

		<uni-section type="line" title="">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">

					<uni-forms-item label="昵称" required name="name" class="formItem">
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入昵称" />
					</uni-forms-item>

					<uni-forms-item label="年龄" required name="age" class="formItem">
						<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
					</uni-forms-item>

					<uni-forms-item label="性别" name="sex" class="formItem">
						<uni-easyinput v-model="valiFormData.sex" placeholder="请输入性别" />
					</uni-forms-item>

					<uni-forms-item label="类型" name="type" class="formItem">
						<!-- <view class="istype">{{ isTypeLabel }}</view> -->
						<uni-easyinput v-model="isTypeLabel" :disabled="true" />
					</uni-forms-item>

					<uni-forms-item label="个性签名" name="remark" class="formItem">
						<uni-easyinput type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" />
					</uni-forms-item>

				</uni-forms>
				<button type="primary" @click="submit">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		apiSubmit
	} from '../../apis/login.js';

	// 从本地存储中获取成员信息
	const storedMember = uni.getStorageSync("member");
	const member = ref(storedMember ? storedMember : {});

	// 表单数据
	const valiFormData = ref({
		name: member.value.nickname || "",
		age: member.value.age || "",
		sex: member.value.sex === 0 ? "男" : member.value.sex === 1 ? "女" : "",
		remark: member.value.remark || ""
	});
	
	const rules = ref({})

	const tempSex = ref(valiFormData.value.sex);

	// 监听 member 的变化，更新表单数据
	watch(member, (newValue) => {
		valiFormData.value = {
			name: newValue.nickname || "",
			age: newValue.age || "",
			sex: newValue.sex === 0 ? "男" : newValue.sex === 1 ? "女" : "",
			remark: newValue.remark || ""
		};
		tempSex.value = valiFormData.value.sex;
	}, {
		immediate: true
	});

	// 更新性别
	function updateSex(value) {
		if (value === "男") {
			valiFormData.value.sex = 0;
		} else if (value === "女") {
			valiFormData.value.sex = 1;
		} else {
			valiFormData.value.sex = null;
		}
		tempSex.value = value;
	}

	// 计算属性，根据 member 的 isType 生成标签
	const isTypeLabel = computed(() => {
		return member.value.isType === 0 ? "会员" : "讲师";
	});

	// 提交函数
	async function submit() {
		try {
			// 处理提交逻辑
			// 例如，更新存储中的数据
			const updatedMember = {
				...member.value,
				nickname: valiFormData.value.name,
				age: valiFormData.value.age,
				sex: valiFormData.value.sex === "男" ? 0 : valiFormData.value.sex === "女" ? 1 : null,
				sign: valiFormData.value.sign,
				remark: valiFormData.value.remark
			};

			// 将更新后的数据存储到本地
			uni.setStorageSync("member", updatedMember);

			// 调用 apiSubmit 发送请求到服务器
			const response = await apiSubmit(updatedMember);

			// 处理服务器响应
			if (response && response.success) {
				// 提交成功
				console.log('提交的数据:', valiFormData.value);

				// 显示成功提示
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
			} else {
				// 处理失败情况
				uni.showToast({
					title: '提交错误2',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('提交过程中发生错误:', error);

			// 显示错误提示
			uni.showToast({
				title: '提交错误2',
				icon: 'none'
			});
		}
	}
	
	const avatarChange=()=>{
		uni.chooseMedia({
			count:1,
			mediaType:['image'],
			success:(res)=>{
				const { tempFilePath } = res.tempFiles[0]
				uni.uploadFile({
					url:'/student/member/avatarChange',
					name:'file',
					filePath: tempFilePath,
					success: (res) => {
						console.log(res)
					}
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.lagBox {
		background: 
		linear-gradient(to bottom, transparent, #ffffff 100%),
		linear-gradient(to right, #c4ecd7, #f3dacb);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0px;
		bottom: 0px;

		image {
			width: 100%;
			height: 100%;
		}

		.avatar {

			margin-top: 20px;
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 15rpx;


		}

		.example {
			margin: 10px 20px 0px 20px;

			// border: 1px solid #000;
			.istype {
				margin-top: 21rpx;
				display: flex;
				// align-items: center;
				flex-direction: column;
			}

		}

		button {
			border-radius: 8px;
			/* 你可以调整为你需要的圆角半径 */
			background: 
			linear-gradient(to top left, #f1ddaa, #abffa9);
			/* 白色半透明背景 */
			box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1);
			/* 浅灰色阴影 */
			color: #000;
			margin-bottom: 30px;
		}
	}
</style>